<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 属性操作</title>
    <!-- 引入jQuery -->
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        .other {
            background-color: orange;
            font-size: 20px;
        }
        .myBtn{
            background-color: red;
        }
    </style>
</head>
<body>
<input id="btn" type="button" value="点我" class="a b c"/>
<form>
    <fieldset>
        <legend>属性操作</legend>
        <input type="button" value="获取属性值" id="getAttr"/>
        <input type="button" value="设置属性值" id="setAttr"/>
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>CSS 操作</legend>
        <input type="button" value="添加CSS" id="addClass"/>
        <input type="button" value="删除CSS" id="removeClass"/>
        <input type="button" value="轮换CSS" id="toggleClass"/>
        <input type="button" value="判断CSS" id="hasClass"/>
    </fieldset>
</form>

<input type="checkbox" value="1" checked name="gender" id="gender" data-option='{"name" : "蒋干"}'
       style="color: red; background: aqua" class="myBtn other" > 男

<script>
    // attr, 设置和获取元素属性值
    /*
    console.log($('#btn').attr('id'));
    console.log($('#btn').attr('type'));
    console.log($('#btn').attr('value'));
    $('#btn').attr('type', 'text');
    $('#btn').attr('value', '不要点我');*/
    // $('#btn').val('不要点我');

   /* $('#btn').addClass('a');
    $('#btn').addClass('b');
    $('#btn').addClass('c');
    $('#btn').removeClass('a');
    $('#btn').removeClass('b');
    $('#btn').removeClass('c');
    $('#btn').toggleClass('a');*/

    /*console.log($('#gender').prop('checked'));
    $('#gender').prop('checked', true)*/
    console.log($('#gender').attr('checked'));

    console.log($('#gender').data('option'));
    console.log($('#gender').attr('data-option'));
</script>
</body>
</html>